<template>
	<panel title="Choose the number the questions as you want.">
		<div class="row">
			<div class="col-xs-6" v-for="ele in questypes">
				<div class="checkbox">
					<label><input type="checkbox" :value="ele.key"
						v-model="questypeSelections">{{ ele.value }}</label>
				</div>
			</div>
		</div>
		<button class="btn btn-success btn-lg center-block" 
			@click="selectQuestype">
			<span class="glyphicon glyphicon-ok">Comfirm</span>		
		</button>
	</panel>
</template>
<script>
	import Panel from 'components/Panel.vue'
	import { mapState, mapMutations } from 'vuex'
	import { arrayCopy } from 'utils'
	
	export default {
		data() {
			return {};
		},
		computed: {
			questypeSelections: {
  				get() {
	  				return this.$store.state.pages.exam.new.questypeSelections;
	  			},
	  			set(newValue) {
	  				arrayCopy(
	  					this.$store.state.pages.exam.new.questypeSelections,
	  					newValue
	  				);
	  			}
	  		},
			...mapState('pages/exam/new', [
	  			'questypes',
	    	]),
		},
		methods: {
			...mapMutations('pages/exam/new', [
	    		'selectQuestype',
	    	]),
		},
		components: {
			Panel,
		},
	}
</script>